<template>
  <div>
    <!-- 2.创建图表容器 -->
    <div ref="container" style="height:150px"></div>
  </div>
</template>
<script>
// 1.引入折线图构造函数  
import { DualAxes } from '@antv/g2plot'
// 引入get方法 ES6模块化规范
import {get} from '@/utils/request'
// 1.引入momentjs commonjs 
let moment = require('moment');
// 引入状态辅助函数
import { mapState } from "vuex";
export default {
  data() {
    return {
      // 存放温度数据
      PM10Data:[],
      dualAxes:null
    }
  },
  computed: {
    // 映射公共数据
    ...mapState(["ed"]),
  },
  watch: {
    // 监听设备变化
    async ed() {
      let res = await get("/dashboard/pageQueryData", {
        page: 1,
        pageSize: 50,
        engineer_id: this.ed.engineer_id,
        device_id: this.ed.device_id,
      });
      res.data.list.forEach((item, index, arr) => {
        // (需要格式化的时间) (格式化时间的格式)
        item.insert_time = moment(item.insert_time).format("HH:mm");
        arr[0].pm10 = 15.4;
        arr[0].pm25 = 15.4;
        // temp.push(arr[0],arr[19],arr[39],arr[59],arr[79],arr[99])
      });
      this.PM10Data = res.data.list;
      // this.tempData = res.data.list;
      // 重新根据新数据绘制图表
      this.dualAxes.changeData([this.PM10Data,this.PM10Data]);
    },
  },
  
  methods: {
    moment,
    // 获取温度数据 
    async getPMData(){
      let res = await get('/dashboard/pageQueryTodayData',{
        page:1,
        pageSize:25,
        engineer_id:4,
        device_id:5
      });
      // [{insert_time,tempature},{},{},{}]
      res.data.list.forEach((item,index,arr)=>{
        // (需要格式化的时间) (格式化时间的格式)
        item.insert_time = moment(item.insert_time).format('HH:mm');
        arr[0].pm10 = 5;
        arr[0].pm25 = 5;
      });
      this.PM10Data = res.data.list;
      this.loadCharts();
      // console.log(res,'获取响应');
    },
    // 加载图表实例
    loadCharts() {
      // 3.创建图标实例 
      const dualAxes = new DualAxes(this.$refs.container, {
        data:[this.PM10Data,this.PM10Data],
        padding: 'auto',
        xField: 'insert_time',
        yField: ["pm25","pm10"],
        yAxis:{
          tickCount:5,
          label:{
            style:{
              fill:'white',
              fontSize:16
            }
          }
        },
        xAxis: {
          // type: 'timeCat',
          label:{
            rotate:-45,
            style:{
              fill:'white',
              fontSize:16
            }
          }
        },
      });
      // 4.渲染图表
      dualAxes.render(),
      this.dualAxes=dualAxes
    }
  },
  mounted() {
    this.getPMData();
    // this.loadCharts();
  }
}
</script>